import React, {useEffect, useRef, useState} from 'react';
import {
  StyleSheet,
  View,
  Button,
  Animated,
  TouchableOpacity,
  Text,
  Easing,
} from 'react-native';

const initVal = 0;
const Animated_spring弹性动画函数_Animated_timing时间动画函数96_97 = () => {
  const [first, setfirst] = useState(initVal);

  const marginLeft = useRef(new Animated.Value(initVal)).current;

  useEffect(() => {
    /* ------9_6Animated_spring弹性动画函数-- */
    Animated.spring(marginLeft, {
      toValue: first,
      useNativeDriver: false,

      // 第一组配置
      // bounciness: 25,
      // speed: 10,

      // 第二组配置
      tension: 40,
      friction: 7,

      // 第三组配置
      // stiffness: 100,
      // damping: 10,
      // mass: 1,
    }).start();
  }, [first]);

  return (
    <View style={styles.root}>
      <Button
        title="按钮 reset"
        onPress={() => {
          // marginLeft.setValue(initVal);
          setfirst(initVal);
        }}
      />
      <Button
        title="按钮spring"
        onPress={() => {
          setfirst(first + 30);
        }}
      />
      <Animated.View
        style={[
          /* --平移的属性 */
          styles.view,
          // {marginLeft: marginLeft},
          {transform: [{translateX: marginLeft}]},
          {
            // position: 'absolute',
            // top: marginLeft,
            // left: marginLeft,
          },
        ]}
      />

      <Button
        title="按钮timing"
        onPress={() => {
          /* ------9_7 Animated.timing时间动画函数-- */
          Animated.timing(marginLeft, {
            toValue: 300,
            duration: 500,
            // easing: Easing.back(3),
            // easing: Easing.ease,
            // easing: Easing.bounce,
            // easing: Easing.elastic(3),

            // easing: Easing.linear,
            // easing: Easing.quad,
            // easing: Easing.cubic,

            // easing: Easing.bezier(0.7, 0.2, 0.42, 0.82),
            // easing: Easing.circle,
            // easing: Easing.sin,
            // easing: Easing.exp,

            // easing: Easing.in(Easing.bounce),
            // easing: Easing.out(Easing.exp),
            easing: Easing.inOut(Easing.elastic(3)),
            useNativeDriver: false,
          }).start();
        }}
      />
      <Animated.View
        style={[
          /* --平移的属性 */
          styles.view,
          {marginLeft: marginLeft},
          // {transform: [{translateX: marginLeft}]},
          {
            // position: 'absolute',
            // top: marginLeft,
            // left: marginLeft,
          },
        ]}
      />
    </View>
  );
};

export default Animated_spring弹性动画函数_Animated_timing时间动画函数96_97;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 'auto',
    backgroundColor: 'white',
  },
  view: {
    width: 100,
    height: 100,
    backgroundColor: '#3050ff',
    marginTop: 20,
  },
  button: {
    marginLeft: 'auto',
    width: 200,
    height: 65,
    backgroundColor: '#2030FF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  txt: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
});
